<template>
  <div class="detail-container">
      <!-- 头部导航 -->
      <div class="header">
          <button @click="closeProfile" class="back-button">
              <i class="el-icon-arrow-left"></i> 返回论坛
          </button>
      </div>

      <div class="content-wrapper">
        <div class="main-section">
            <!-- 文章头部 -->
            <div class="article-header">
                <h1 class="title">{{ tipTitel }}</h1>
                <div class="meta-info">
                    <span class="author" @click="showUserProfile(tipUserE)">
                        <el-avatar :size="24" :src="String(tipUserPic)" class="author-avatar"></el-avatar>
                        @{{ tipUserN }}
                        <span class="user-rank" :class="getRankClass(tipUserRank)">
                            {{ getRankLabel(tipUserRank) }}
                        </span>
                    </span>
                    <span class="category">分类: {{ getTypeName(tipTypeId) }}</span>
                    <span class="time">{{ formatTime(tipTime) }}</span>
                </div>
            </div>

            <!-- 图片区域 -->
            <div class="image-container">
                <img
                    :src="tipPictrue|| require('@/assets/no-image.png')"
                    alt="文章封面图"
                    @click="showImageViewer = true"
                    class="article-image">
                <!-- 添加放大提示 -->
                <div class="zoom-hint">
                    <i class="el-icon-zoom-in"></i> 点击查看大图
                </div>
            </div>

            <!-- 文章内容 -->
            <div class="article-content" v-html="text"></div>

            <!-- 交互操作区 -->
            <div class="action-bar">
                <!-- 点赞按钮 -->
                <div class="like-action">
                    <button @click="toggleLike" :class="{ 'liked': isLiked }" class="like-button">
                        <span class="like-icon">
                            <i :class="isLiked ? 'el-icon-star-on' : 'el-icon-star-off'"></i>
                        </span>
                        <span class="like-count">{{ tipGoods }}</span>
                    </button>
                </div>

                <!-- 评论按钮 -->
                <div class="comment-action">
                    <button @click="toggleComments" class="comment-button">
                        <span class="comment-icon">
                            <i class="el-icon-chat-dot-round"></i>
                        </span>
                        <span class="comment-count">{{ tipComments }}</span>
                    </button>
                </div>

                <!-- 浏览数统计 -->
                <div class="view-stat">
                    <i class="el-icon-view"></i>
                    <span>{{ tipViews }}</span>
                </div>
            </div>

            <!-- 评论区域 -->
            <transition name="fade">
                <div v-if="showComments" class="comments-section">
                    <div class="comments-header">
                        <h2>评论区 ({{ tipComments }})</h2>
                    </div>

                    <div class="comment-form" @drop="drop($event)" @dragover.prevent>
                        <textarea
                            v-model="newCommentText"
                            placeholder="添加评论..."
                            class="comment-textarea"
                            rows="3"></textarea>
                        <button @click="addComment" class="submit-comment">
                            发表评论
                        </button>
                    </div>

                    <div class="comments-wrapper">
                        <div class="comments-list" ref="commentList">
                            <div v-if="comments.length === 0" class="no-comments">
                                <i class="el-icon-chat-line-square"></i>
                                <p>暂无评论，来发表第一条评论吧！</p>
                            </div>

                            <div v-for="(comment, index) in comments"
                                 :key="index"
                                 class="comment-item"
                                 draggable
                                 @dragstart="dragStart($event, comment)">
                                <div class="comment-header">
                                    <div class="comment-user-info">
                                        <el-avatar :size="36" :src="String(comment.userPicture)" class="comment-avatar" @click="showUserProfile(comment.userEmail)"></el-avatar>
                                        <div class="comment-user-details">
                                            <span class="comment-author" @click="showUserProfile(comment.userEmail)">
                                                @{{ comment.userName }}
                                                <span class="user-rank" :class="getRankClass(comment.userRank)">
                                                    {{ getRankLabel(comment.userRank) }}
                                                </span>
                                            </span>
                                            <span class="comment-email">{{ comment.userEmail }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="comment-body">
                                    {{ comment.commentText }}
                                </div>
                                <div class="comment-footer">
                                    <div class="comment-meta">
                                        <span class="comment-time">{{ formatDate(comment.commentTime) }}</span>
                                        <!-- 新增：回复数量和展开按钮 -->
                                        <div v-if="comment.comments && comment.comments > 0" class="reply-info">
                                            <button
                                                class="expand-replies-btn"
                                                @click="toggleSecondComments(comment.commentId)"
                                                :disabled="loadingStates[comment.commentId]">
                                                <i :class="[
                                                    loadingStates[comment.commentId] ? 'el-icon-loading' :
                                                    expandedStates[comment.commentId] ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                                                ]"></i>
                                                {{ comment.comments }} 条回复
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <!-- 新增：二级评论列表 -->
                                <transition name="fade">
                                    <div v-if="expandedStates[comment.commentId]" class="second-comments">
                                        <div v-if="loadingStates[comment.commentId]" class="loading-replies">
                                            <i class="el-icon-loading"></i> 加载回复中...
                                        </div>
                                        <template v-else>
                                            <div v-if="secondComments[comment.commentId] && secondComments[comment.commentId].length > 0"
                                                 class="second-comments-list">
                                                <div v-for="(reply, replyIndex) in secondComments[comment.commentId]"
                                                     :key="replyIndex"
                                                     class="second-comment-item">
                                                    <div class="second-comment-header">
                                                        <div class="user-info">
                                                            <el-avatar :size="24" :src="String(reply.userPicture)" class="second-comment-avatar" @click="showUserProfile(reply.userEmail)"></el-avatar>
                                                            <span class="second-comment-author" @click="showUserProfile(reply.userEmail)">
                                                                @{{ reply.userName }}
                                                                <span class="user-rank" :class="getRankClass(reply.userRank)">
                                                                    {{ getRankLabel(reply.userRank) }}
                                                                </span>
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <div class="second-comment-body">
                                                        {{ reply.commentText }}
                                                    </div>
                                                    <div class="second-comment-footer">
                                                        <span class="comment-time">{{ formatDate(reply.commentTime) }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div v-else class="no-replies">
                                                暂无回复
                                            </div>
                                        </template>
                                    </div>
                                </transition>
                            </div>
                        </div>

                        <div class="pagination-container" v-if="totalComments > 0">
                            <el-pagination
                                @current-change="handleCurrentChange"
                                :current-page.sync="PageNum"
                                :page-size="PageSize"
                                layout="prev, pager, next"
                                :total="totalComments">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </transition>
        </div>
      </div>

      <!-- 图片查看器 -->
      <div v-if="showImageViewer" class="image-viewer-overlay" @click="showImageViewer = false">
        <div class="image-viewer-content" @click.stop>
            <img :src="tipPictrue || require('@/assets/no-image.png')" alt="大图查看" class="image-viewer-img">
            <button class="close-viewer" @click="showImageViewer = false">
                <i class="el-icon-close"></i>
            </button>
        </div>
      </div>

      <!-- 用户信息弹窗 -->
      <el-dialog
        title="用户信息"
        :visible.sync="userProfileVisible"
        width="400px"
        custom-class="user-profile-dialog"
        :close-on-click-modal="true"
        :close-on-press-escape="true"
        :show-close="true"
        center>
        <div v-if="selectedUser" class="user-profile-content">
          <div class="user-profile-header">
            <el-avatar :size="80" :src="String(selectedUser.userPicture)" class="user-avatar"></el-avatar>
            <div class="user-name">{{ selectedUser.userName }}</div>
            <div class="user-email">{{ selectedUser.userEmail }}</div>
          </div>
          <div class="user-profile-info">
            <div class="info-item">
              <span class="info-label">学院:</span>
              <span class="info-value">{{ selectedUser.dept_name || getCategoryName(selectedUser.dept_id) }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">性别:</span>
              <span class="info-value">{{ selectedUser.userSex }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">年龄:</span>
              <span class="info-value">{{ selectedUser.userAge }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">国籍:</span>
              <span class="info-value">{{ selectedUser.userFrom }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">积分:</span>
              <span class="info-value">{{ selectedUser.userRank }}</span>
            </div>
            <div class="info-item introduction">
              <span class="info-label">个人简介:</span>
              <span class="info-value">{{ selectedUser.userSelf }}</span>
            </div>
          </div>
        </div>
      </el-dialog>

      <!-- 遮罩层 -->
      <div v-if="loading" class="loading-overlay">
          <loading/>
      </div>
  </div>
</template>

<script>
import {
    addComment,
    cancelUserGoods,
    createRank,
    downRank,
    getComment,
    getMyGoodTipId,
    getSecondComment,
    gettip,
    getUserInfo,
    userGoods
} from "@/api/api";
import Loading from "@/components/Loading.vue";
import {getRankClass, getRankLabel} from "@/utils/rankUtils";

export default {
    components: {Loading},
    created() {
            this.tipId = this.$route.query.id;
            console.log("id");
            console.log( this.$route.query.id);
            this.initTipDetail();
    },
  data() {
    return {
        newCommentText:"",
        showComments:false,
        isLiked:false,
        tipUserId:"",
        text:"",
        tipId: 0,
        tipTextid: 0,
        tipTitel: "",
        tipPictrue: "",
        tipUserN:"",
        tipStatus: 1,
        tipUserE:"",
        tipUserPic:"",
        tipTime: "",
        tipGoods: 0,
        tipViews: 0,
        tipComments: 0,
        tipTypeId: 0,
        tipUserRank: 0,
        tipType:"",
        comments:[],
        loading:false,
        FromCommentId: null,
        showImageViewer: false,
        userProfileVisible: false,
        selectedUser: null,
        defaultAvatar: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        PageNum: 1,
        PageSize: 5,
        totalComments: 0,
        secondComments: {},
        expandedStates: {},
        loadingStates: {},
    };
  },
    watch: {
    },
  methods: {
    // 根据帖子类型ID获取类型名称
    getTypeName(tipTypeId) {
      // 从store中获取帖子类型列表
      const tipTypeList = this.$store.state.tipTypeList;
      
      // 如果store中没有帖子类型数据，则触发获取
      if (tipTypeList.length === 0) {
        this.$store.dispatch('fetchTipTypes');
        return '加载中...';
      }
      
      // 查找对应的帖子类型
      const tipType = tipTypeList.find(type => type.tipTypeId === tipTypeId);
      return tipType ? tipType.tipTypeName : '未知类型';
    },
    
    getCategoryName(typeId) {
      const dept = this.$store.state.deptList.find(dept => dept.dept_id === typeId);
      return dept ? dept.dept_name : '不带tag';
    },
      dragStart(event, comment) {
          event.dataTransfer.setData('text/userName', comment.userName);
          event.dataTransfer.setData('text/id', comment.commentId);
          event.dataTransfer.setData('text/text', comment.commentText);
      },
      drop(event) {
          const userName = event.dataTransfer.getData('text/userName');
          const commentText = event.dataTransfer.getData('text/text');
          this.newCommentText = `@${userName}:${commentText} \n`;
          this.FromCommentId = event.dataTransfer.getData('text/id');
      },
      //关闭个人信息页
      closeProfile() {
          this.$router.go(-1); // 返回上一页
      },
       async initTipDetail(){
            const response = await gettip({
                id: this.tipId,
            });
           console.log(response.data);
           if (response.data.message==="成功"){
                   this.text = response.data.data.text;
               this.tipId = response.data.data.tipId;
               this.tipTextid = response.data.data.tipTextid;
               this.tipTitel = response.data.data.tipTitel;
               this.tipPictrue = response.data.data.tipPictrue;
               this.tipUserN = response.data.data.tipUserN;
               this.tipStatus=response.data.data.tipStatus;
               this.tipUserE = response.data.data.tipUserE;
               this.tipUserPic = response.data.data.tipUserPic;
               this.tipUserRank = response.data.data.tipUserRank;
               this.tipTime = response.data.data.tipTime;
               this.tipGoods = response.data.data.tipGoods;
               this.tipViews = response.data.data.tipViews;
                this.tipComments = response.data.data.tipComments;
                this.tipTypeId = response.data.data.tipTypeId;
               // 检查是否已点赞
               this.isLiked = this.$store.state.myGoodTips.some(tipId => tipId === this.tipId);
               // 不再直接使用接口返回的类型名称，而是通过getTypeName方法获取
               // this.tipType = response.data.data.tipTypeName || '未知类型';
           }
        },
   async addComment() {
          if (!this.newCommentText.trim()) {
              this.$message({
                  message: '评论内容不能为空',
                  type: 'warning'
              });
              return;
          }

          this.loading=true;
          const params = {
              CommentText: this.newCommentText,
              TipId: this.tipId,
              FromCommentId: this.FromCommentId || null,
              UserPicture: this.$store.state.me.userPicture,
              UserRank: this.$store.state.me.userRank,
          };

          try {
              const newComment = await addComment(params);
              if (newComment.data.message === "成功") {
                  this.newCommentText = '';
                  this.FromCommentId = null;
                  // 滚动到最新评论
                  this.$nextTick(() => {
                      if (this.$refs.commentList) {
                          this.$refs.commentList.scrollTop = this.$refs.commentList.scrollHeight;
                      }
                  });
                  await this.loadComments();
                  // 更新评论总数
                  this.tipComments++;
                  this.totalComments++;
              } else {
                  this.$message.error(newComment.data.message || '评论失败');
              }
          } catch (error) {
              console.error('评论发送失败:', error);
              this.$message.error('评论发送失败，请稍后重试');
          } finally {
              this.loading = false;
          }
    },
    formatDate(timestamp) {
      const options = {year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit'};
      return new Date(timestamp).toLocaleDateString(undefined, options);
    },
    formatTime(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      const now = new Date();
      const diffTime = Math.abs(now - date);
      const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));

      if (diffDays === 0) {
          const hours = Math.floor(diffTime / (1000 * 60 * 60));
          if (hours === 0) {
              const minutes = Math.floor(diffTime / (1000 * 60));
              return `${minutes} 分钟前`;
          }
          return `${hours} 小时前`;
      } else if (diffDays === 1) {
          return '昨天';
      } else if (diffDays < 7) {
          return `${diffDays} 天前`;
      } else {
          return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
      }
    },
      async toggleLike() {
          this.isLiked = !this.isLiked;
          if (this.isLiked) {
              const response = await userGoods({
                  id:this.tipId,
              });
              if (response.data.message==="成功") {
                  this.tipGoods++;
                  // 点赞成功，给帖子作者增加2积分
                  try {
                      await createRank(this.tipUserE, 2);
                      console.log("积分增加成功");
                  } catch (error) {
                      console.error("积分增加失败", error);
                  }
              }
              else {
                  this.$message.error("点赞失败");
                  this.isLiked = !this.isLiked;
              }
          } else {
              const response = await cancelUserGoods({
                  id:this.tipId,
              });
              if (response.data.message==="成功") {
                  this.tipGoods--;
                  // 取消点赞，给帖子作者减少2积分
                  try {
                      await downRank(this.tipUserE, 2);
                      console.log("积分减少成功");
                  } catch (error) {
                      console.error("积分减少失败", error);
                  }
              }
              else {
                  this.$message.error("取消点赞失败");
                  this.isLiked = !this.isLiked;
              }
          }
          const GoodsTip= await getMyGoodTipId();
          this.$store.state.myGoodTips=GoodsTip.data.data;
          this.$store.commit('setMyGoodTips',  this.$store.state.myGoodTips);
      },
   async toggleComments() {
       this.loading=true;
      this.showComments = !this.showComments;
      if (this.showComments) {
          await this.loadComments();
      }
       this.loading=false;
    },
    async toggleSecondComments(commentId) {
        if (this.expandedStates[commentId]) {
            this.$set(this.expandedStates, commentId, false);
            return;
        }

        this.$set(this.loadingStates, commentId, true);
        this.$set(this.expandedStates, commentId, true);

        try {
            await this.loadSecondComments(commentId);
        } finally {
            this.$set(this.loadingStates, commentId, false);
        }
    },
    async loadSecondComments(commentId) {
        try {
            const response = await getSecondComment({
                TipId: this.tipId,
                PageNum: 1,
                FromCommentId: commentId
            });

            if (response.data.message === "成功") {
                this.$set(this.secondComments, commentId, response.data.data.list || []);
            } else {
                this.$message.error("获取回复失败");
                this.$set(this.expandedStates, commentId, false);
            }
        } catch (error) {
            console.error("获取回复出错:", error);
            this.$message.error("获取回复出错");
            this.$set(this.expandedStates, commentId, false);
        }
    },
    // 添加加载评论方法
    async loadComments() {
        const response = await getComment({
            TipId: this.tipId,
            PageNum: this.PageNum
        });
        if (response.data.message==="成功"){
            this.comments = response.data.data.list;
            this.totalComments = response.data.data.total;
        }
        else{
            this.$message({
                message: response.data.message,
                type: 'error',
            });
        }
    },
    // 添加页码改变处理方法
    async handleCurrentChange(val) {
        this.PageNum = val;
        await this.loadComments();
        // 滚动到评论列表顶部
        this.$nextTick(() => {
            if (this.$refs.commentList) {
                this.$refs.commentList.scrollTop = 0;
            }
        });
    },
    // 获取部门名称
    getDeptName(deptId) {
        if (!deptId) return '未设置';
        const dept = this.$store.state.deptList.find(dept => dept.dept_id === deptId);
        return dept ? dept.dept_name : '未知部门';
    },
    // 显示用户个人主页
    async showUserProfile(userEmail) {
      if (!userEmail) return;

      this.loading = true;
      try {
        const response = await getUserInfo(userEmail);
        if (response.data.message === "成功") {
          this.selectedUser = response.data.data;
          console.log(this.selectedUser);
          this.userProfileVisible = true;
        } else {
          this.$message.error("获取用户信息失败");
        }
      } catch (error) {
        console.error("获取用户信息出错:", error);
        this.$message.error("获取用户信息出错");
      } finally {
        this.loading = false;
      }
    },
    // 关闭用户个人主页
    handleCloseUserProfile() {
      this.userProfileVisible = false;
      this.selectedUser = null;
    },
    // 使用共享评级方法
    getRankClass,
    getRankLabel
  },
};
</script>

<style lang="scss" scoped>
.detail-container {
    min-height: 100vh;
    background-color: #f6f9fc;
    display: flex;
    flex-direction: column;
}

.header {
    background: linear-gradient(90deg, #5e72e4, #825ee4);
    padding: 16px 24px;
    box-shadow: 0 4px 12px rgba(94, 114, 228, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
}
.pagination-container {
    position: sticky;
    bottom: 0;
    height: auto;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    margin-top: auto;
    display: flex;
    justify-content: center;
    border-top: 1px solid #eaeaea;
    transition: all 0.3s ease;
    z-index: 1;

    &:hover {
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    }

    .el-pagination {
        .btn-prev, .btn-next {
            background-color: #f8fafc;
            border: 1px solid #e4e7eb;
            border-radius: 6px;
            padding: 6px 12px;
            margin: 0 4px;
            transition: all 0.3s ease;

            &:hover {
                background-color: #5e72e4;
                color: white;
                border-color: #5e72e4;
                transform: translateY(-1px);
            }

            &:active {
                transform: translateY(0);
            }
        }

        .number {
            background-color: #f8fafc;
            border: 1px solid #e4e7eb;
            border-radius: 6px;
            padding: 6px 12px;
            margin: 0 2px;
            font-weight: 500;
            transition: all 0.3s ease;

            &:hover {
                background-color: #e8ecfd;
                color: #5e72e4;
                transform: translateY(-1px);
            }

            &.active {
                background-color: #5e72e4;
                color: white;
                border-color: #5e72e4;
            }
        }
    }
}

.dark-mode .pagination-container {
    background: rgba(17, 24, 39, 0.9);
    border-top-color: #374151;

    .el-pagination {
        .btn-prev, .btn-next, .number {
            background-color: #1f2937;
            border-color: #374151;
            color: #e5e7eb;

            &:hover {
                background-color: #5e72e4;
                color: white;
            }
        }
    }
}

.back-button {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
        background-color: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    i {
        font-size: 16px;
    }
}

.content-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px;
    flex: 1;
}

.main-section {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    padding: 32px;
    position: relative;
}

.article-header {
    margin-bottom: 24px;

    .title {
        font-size: 26px;
        font-weight: 600;
        margin-bottom: 12px;
        color: #333;
    }

    .meta-info {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
        font-size: 14px;
        color: #666;

        .author {
            font-weight: 500;
            color: #5e72e4;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s;

            &:hover {
                color: #4757c6;
                transform: translateY(-2px);
            }
        }

        .author-avatar {
            margin-right: 6px;
            border: 1px solid #e8f4ff;
        }

        .category {
            background-color: #f0f2f7;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
        }

        .time {
            color: #999;
        }
    }
}

.image-container {
    width: 100%;
    max-height: none;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 24px;
    text-align: center;
    position: relative;
    cursor: pointer;

    &:hover .zoom-hint {
        opacity: 1;
    }

    .article-image {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        transition: transform 0.5s;
        object-fit: contain;
        max-height: 80vh;

        &:hover {
            transform: scale(1.03);
        }
    }

    .zoom-hint {
        position: absolute;
        bottom: 10px;
        right: 10px;
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 5px;
        opacity: 0;
        transition: opacity 0.3s;

        i {
            font-size: 14px;
        }
    }
}

.article-content {
    min-height: 200px;
    background-color: #f8faff;
    padding: 24px;
    border-radius: 8px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 24px;
    white-space: pre-wrap;
    word-break: break-word;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    border-left: 4px solid #5e72e4;
}

.action-bar {
    display: flex;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 20px;
    gap: 24px;
}

.like-action, .comment-action {
    display: flex;

    button {
        display: flex;
        align-items: center;
        gap: 8px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 8px 16px;
        border-radius: 8px;
        transition: all 0.3s;
        color: #666;
    }
}

.like-button {
    &:hover {
        background-color: #ffe0eb;
        color: #ff5252;
    }

    &.liked {
        color: #ff5252;

        .like-icon {
            animation: pulse 0.3s ease-in-out;
        }
    }
}

.comment-button {
    &:hover {
        background-color: #e0e6ff;
        color: #5e72e4;
    }
}

.like-icon, .comment-icon {
    font-size: 20px;
}

.view-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #999;
    margin-left: auto;

    i {
        font-size: 18px;
    }
}

.comments-section {
    margin-top: 32px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    padding: 24px;
}

.comments-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;

    h2 {
        font-size: 20px;
        font-weight: 600;
        color: #333;
        margin: 0;
    }
}

.comment-form {
    background-color: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.comment-textarea {
    width: 100%;
    border: 1px solid #e0e5ef;
    border-radius: 8px;
    padding: 16px;
    resize: none;
    margin-bottom: 16px;
    transition: all 0.3s;
    font-family: inherit;
    background-color: #fff;

    &:focus {
        outline: none;
        border-color: #5e72e4;
        box-shadow: 0 0 0 2px rgba(94, 114, 228, 0.1);
    }
}

.submit-comment {
    padding: 12px 24px;
    background-color: #5e72e4;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 500;
    float: right;

    &:hover {
        background-color: #4757c6;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(94, 114, 228, 0.3);
    }

    &:active {
        transform: translateY(0);
    }
}

.comments-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.comments-list {
    .comment-item {
        background-color: #fff;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 16px;
        border: 1px solid #eef0f5;
        transition: all 0.3s;

        &:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transform: translateY(-2px);
        }
    }
}

.no-comments {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    color: #999;

    i {
        font-size: 40px;
        margin-bottom: 16px;
        opacity: 0.5;
    }

    p {
        font-size: 14px;
    }
}

.comment-item {
    background-color: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid #eef0f5;
    transition: all 0.3s;

    &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        transform: translateY(-2px);
    }
}

.comment-header {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comment-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comment-avatar {
    cursor: pointer;
    transition: transform 0.3s;

    &:hover {
        transform: scale(1.1);
    }
}

.comment-user-details {
    display: flex;
    flex-direction: column;
}

.comment-author {
    font-weight: 500;
    color: #5e72e4;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
        color: #4757c6;
        text-decoration: underline;
    }
}

.comment-email {
    font-size: 12px;
    color: #999;
}

.comment-body {
    margin-bottom: 16px;
    line-height: 1.6;
    color: #2c3e50;
    word-break: break-word;
    font-size: 14px;
}

.comment-footer {
    border-bottom: 1px solid #eef0f5;
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.comment-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #8492a6;
    font-size: 13px;
}

.reply-info {
    display: flex;
    align-items: center;
}

.expand-replies-btn {
    background: none;
    border: none;
    color: #5e72e4;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.3s;

    &:hover:not(:disabled) {
        background-color: #f0f2ff;
        color: #4757c6;
        transform: translateY(-1px);
    }

    &:disabled {
        cursor: not-allowed;
        opacity: 0.7;
    }

    i {
        font-size: 14px;
        transition: all 0.3s;

        &.el-icon-loading {
            animation: rotate 1s linear infinite;
        }
    }
}

.loading-replies, .no-replies {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #8492a6;
    padding: 16px;
    font-size: 13px;
    background-color: #f8fafc;
    border-radius: 8px;
    margin: 12px 0;
    border: 1px dashed #e0e5ef;
}

.loading-replies {
    i {
        font-size: 16px;
        color: #5e72e4;
        animation: rotate 1s linear infinite;
    }
}

.no-replies {
    color: #8492a6;
    font-style: italic;
    background-color: #f8fafc;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.second-comments {
    margin-top: 0;
    padding: 0 0 0 24px;
    border-left: 2px solid #e0e5ef;
    overflow: hidden;
}

.second-comments-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 12px;
    animation: slideDown 0.3s ease-out;
}

.second-comment-item {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 16px;
    transition: all 0.3s;
    border: 1px solid #eef0f5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);

    &:hover {
        background-color: #f8f9ff;
        box-shadow: 0 2px 8px rgba(94, 114, 228, 0.05);
    }
}

.second-comment-header {
    margin-bottom: 12px;

    .user-info {
        display: flex;
        align-items: center;
        gap: 8px;
    }
}

.second-comment-body {
    color: #2c3e50;
    line-height: 1.6;
    font-size: 14px;
    margin-bottom: 12px;
    padding-left: 32px;
}

.second-comment-footer {
    display: flex;
    justify-content: flex-end;
    color: #8492a6;
    font-size: 12px;
    padding-left: 32px;
}

.fade-enter-active, .fade-leave-active {
    transition: all 0.3s ease;
}

.fade-enter, .fade-leave-to {
    opacity: 0;
    transform: translateY(-10px);
}

.image-viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
    animation: fadeIn 0.3s ease;
}

.image-viewer-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    cursor: default;
}

.image-viewer-img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.close-viewer {
    position: absolute;
    top: -40px;
    right: 0;
    background-color: transparent;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;

    &:hover {
        transform: rotate(90deg);
    }
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.slide-enter-active, .slide-leave-active {
    transition: transform 0.3s ease;
}
.slide-enter, .slide-leave-to {
    transform: translateX(100%);
}

.user-profile-dialog {
  border-radius: 12px;
  overflow: hidden;

  .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #eee;

    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
  }

  .el-dialog__body {
    padding: 0;
  }
}

.user-profile-content {
  padding: 20px;
}

.user-profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;

  .user-avatar {
    margin-bottom: 12px;
    border: 3px solid #5e72e4;
  }

  .user-name {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
  }

  .user-email {
    font-size: 14px;
    color: #666;
  }
}

.user-profile-info {
  .info-item {
    display: flex;
    margin-bottom: 12px;

    .info-label {
      width: 80px;
      color: #666;
      font-size: 14px;
    }

    .info-value {
      flex: 1;
      color: #333;
      font-size: 14px;
    }

    &.introduction {
      flex-direction: column;

      .info-value {
        margin-top: 8px;
        line-height: 1.5;
      }
    }
  }
}

.author, .comment-author {
  cursor: pointer;
  transition: color 0.3s, transform 0.2s;

  &:hover {
    color: #4757c6;
    text-decoration: underline;
    transform: translateY(-1px);
  }
}

/* 用户等级样式 */
.user-rank {
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    color: white;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    vertical-align: middle;
}

.rank-d {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
}

.rank-c {
    background: linear-gradient(135deg, #2196f3, #0d47a1);
}

.rank-b {
    background: linear-gradient(135deg, #9c27b0, #4a148c);
}

.rank-a {
    background: linear-gradient(135deg, #424242, #212121);
}

.rank-a-plus {
    background: linear-gradient(135deg, #ff9800, #e65100);
}

.rank-s {
    background: linear-gradient(135deg, #ffd700, #ff6f00);
    color: #5d4037;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
